<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>销售数据明细</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<jsp:include page="../common.jsp"></jsp:include>
	
<script type="text/javascript">
  //定义加载次数
  var LoadNumber=1;
  var cols = [ 
            {field:'moOrderId', title:'订单单号',width:100},
			{field:'moOrderType', title:'订单类型',width:100},
			{field:'moOrderTotalMoney', title:'订单总金额',width:100},
			{field:'empCode', title:'员工编号',width:100},
			{field:'empName', title:'员工姓名',width:100},
			{field:'proId', title:'商品ID',width:100},
			{field:'proName', title:'商品名称',width:100},
			{field:'proSalesPrice', title:'商品售价',width:100},
			{field:'proCostPrice', title:'商品成本',width:100}  
  ];
  
	 $(function(){ 
	   if(LoadNumber==1){
	     init();
		 drag();
	   }
	    
		  
	    //隐藏所有查询条件
	    $('#tiaojian li').hide();
	    //折叠南区                  
	    $('#cc').layout('collapse','east');
		  
	 });
		
	//遍历所有查询条件
    function selAllCondition(){
        var objList=[];
	    //对id为tiaojian的div下li元素进行遍历
	    $('#tiaojian li').each(function(i,e){
               objList.push({'text':$(this).attr("id"),'id':$(this).attr("id")});
         });        
                
         $('#choiceCondition').datalist({
         	 data: objList,
             valueField:'id',
             textField:'text',
             singleSelect:false,
             onSelect:function(index,row){
               console.log(row.id);
                  //启用属性
                  $("#"+row.id).attr("disabled",false);
                  //显示属性            
                  $("#"+row.id).show();               
                },
             onUnselect:function(index,row){
                 //隐藏就禁用属性，防止向后台传值
                 $("#"+row.id).attr("disabled",true);
                 //隐藏属性             
                 $("#"+row.id).hide();
             }
         })
    }
    
    //遍历所有列
    function selAllColumns(){    
           //得到所有列的field属性的值
		     var opts = $('#dg').datagrid('getColumnFields');	
		     var obj={}; 
		     var objList=[];			     
		     $.each(opts,function(i,e){
		        //根据所有field属性的值,得到title属性的值
		        //opts02.push($('#dg').datagrid('getColumnOption',e).title);
		        //把title属性的值放到数据列表中
		        obj={'text':$('#dg').datagrid('getColumnOption',e).title,'id':opts[i]};
		        objList.push(obj);
		     })
		     $('#choiceColumns').datalist({
			     	data:objList,
                       valueField:'id',
                       textField:'text',
                       singleSelect:false,
                       onSelect:function(index,row){
                          $('#dg').datagrid('hideColumn',row.id);
                          console.log(cols[1]);
                       },
                       onUnselect:function(index,row){
                          $('#dg').datagrid('showColumn',row.id);
                       }                            			   
			 });          
    }
   
   //查询
  function query(){
		var createTime_min =$("#createTime_min").datebox('getValue');
		var createTime_max =$("#createTime_max").datebox('getValue');
		console.log("createTime_min:"+createTime_min+",createTime_max:"+createTime_max);		
	    if(queryData(createTime_min,createTime_max)!=false){		    
		    grid.datagrid('load',sy.serializeObject($('#searchForm')));    
	    }  
	}
  //导出报表	
  function downloadFinanceData(){
          var createTime_min =$("#createTime_min").datebox('getValue');
		  var createTime_max =$("#createTime_max").datebox('getValue');
         if(queryData(createTime_min,createTime_max)!=false){		    
		   $("#searchForm").attr("action","salesDetailed/downloadSelSalesDetailed.htm");
		   $("#searchForm").submit();    
	    } 	
   }
   
   
   	//初始化表格
	function  init(){
		grid= $('#dg').datagrid({
	    title : '销售数据明细',
	    url:'salesDetailed/selSalesDetailed.json',
	    pagination:true,
	    pageSize:50,
	    pageList: [ 10, 15, 25, 50,100,200],
	    rownumbers : true,
	    resizeHandle:'right', 
        //工具按钮
	    toolbar: [{ 
			        text:'选择条件',
					iconCls: 'icon-add',
					handler: function(){
					  //显示南区  				 				                   
	                  $('#cc').layout('expand','east');			
					}
		       }],		    
	    //额外的参数
	    queryParams:{
	      createTime_min: new Date().Format("yyyy-MM-dd"),
		  createTime_max: new Date().Format("yyyy-MM-dd"),	          
	    },   	          	    
	    //冻结列
	    frozenColumns:[[
	      {field:'recordDate', title:'业务日期',width:100,
	                   formatter:function(value, row, index){
		                 var unixTimestamp = new Date(value);
				            if(value!=null){
					          return unixTimestamp.Format("yyyy-MM-dd");
				            }
	             }
          }
	     ]],
	    //可移动的列
	    columns:[cols],
	    //数据加载完执行
	    onLoadSuccess:function(target, rows){
	         //只在第一次加载时执行此方法
		      if(LoadNumber==1){
		        selAllCondition();
			    selAllColumns();
		        LoadNumber++
		      }
		      drag();	           				   	   
	    } 	    	    
	  });
	}
	
	function drag() {
        $('.datagrid-header-inner .datagrid-cell').draggable({
            revert: true,
            proxy: 'clone'
        }).droppable({
            accept: '.datagrid-header-inner .datagrid-cell',
            onDrop: function (e, source) {
                //取得拖动源的html值
                var src = $(e.currentTarget.innerHTML).html();
                console.log("拖动源"+$(e.currentTarget.innerHTML).html());
                //取得拖动目标的html值
                var sou = $(source.innerHTML).html();
                 console.log("拖动目标"+sou);
                var tempcolsrc;//拖动后源和目标列交换
                var tempcolsou;
                var tempcols=[];
                for (var i = 0; i < cols.length; i++) {
                    if (cols[i].title == sou) {
                        tempcolsrc = cols[i];//循环读一遍列把源和目标列都记下来
                    }
                    else if (cols[i].title == src) {
                        tempcolsou = cols[i];
                    }
                }
                for (var i = 0; i < cols.length; i++) {
                    //再循环一遍，把源和目标的列对换
                    var col = {
                        field: cols[i].field,
                        title: cols[i].title,
                        align: cols[i].align,
                        width: cols[i].width
                    };
                    if (cols[i].title == sou) {
                        col = tempcolsou;
                    }
                    else if (cols[i].title == src) {
                        col = tempcolsrc;
                    }
                     tempcols.push(col);  
                }
                 cols = tempcols;
                 //1秒后执行重绑定datagrid操作。可能是revert需要时间,这边如果没有做延时就直接重绑 就会出错。
                 //我目前的水平就想到这个笨办法,各位如果有好的想法建议可以提出来讨论下。
                timeid = setTimeout("init()", 100);
            }
        });
    }
       		    		
</script>
<style type="text/css">
ul{margin: 0px;padding: 0px;}
li{ width:300px;height:30px;  list-style-type: none;margin: 0px;padding: 0px;float: left; margin-top:2px;}
li div {float: left;width: 130px;text-align: right;}
li input {width:170px;height:22px}
li select{width:170px;height:22px}
</style>

</head>
  
<body>
	 <div id="cc" class="easyui-layout" fit="true">
      <div data-options="region:'center'" fit="true">
            <div style="width:1396px;border:1px solid red;" id="tiaojian">            
			       <form id="searchForm">
					    <ul>
				        	<li id="开始时间">
				            	<div><label>开始时间</label></div>
				                <input type="text" class= "easyui-datebox" id="createTime_min" name="createTime_min" value="" />
				            </li>
				        	<li id="结束时间">
				            	<div><label>结束时间</label></div>
				                <input type="text" class= "easyui-datebox" id="createTime_max" name="createTime_max"  value=""/>
				            </li>
				            <li id="业务经理">
				            	<div><label>业务经理</label></div>
				                <select id="empCode" name="empCode"></select>
				            </li>
				            <li id="主管">
				            	<div><label>主管</label></div>
				                <input id="zhuguan" name="zhuguan"/ >
				            </li>
				            <li id="区域">
				            	<div><label>区域</label></div>
				                <input id="quyu" name="quyu"/ >
				            </li>
				        	<li id="省份">
				            	<div><label>省份</label></div>
				                <input id="shengfen" name="shengfen"/ >
				            </li>
				            <li id="总监">
				            	<div><label>总监</label></div>
				                <select id="zongjian" name="zongjian"></select>
				            </li>
				            <li id="ceo">
				            	<div><label>ceo</label></div>
				                <input id="ceo" name="ceo" / >
				            </li>
				       </ul> 				              			               				        
			      </form>
			   <a href="javascript:void(0);"class="easyui-linkbutton"data-options="iconCls:'icon-search',plain:true"
							onclick="query();">查询</a>
				<a href="javascript:void(0);"class="easyui-linkbutton"data-options="iconCls:'icon-daochu',plain:true" 
				            onclick="downloadFinanceData();">导出报表</a>			   			       			    			      
			 </div>			 			 
		   <div style="width:100%;height:500px;border:1px solid red;">
                 <table id="dg" fit="true"></table>
           </div> 			 
      </div>
      <div data-options="region:'east',title:'选择区',split:true" style="width:200px;">                			 
		    <div class="easyui-accordion" fit="true"  >
	     		<div title="选择查询条件" data-options="iconCls:'icon-suaixuan'" style="overflow:auto;">
					<div id="choiceCondition"  fit="true"></div> 	 
				</div>
				<div title="选择隐藏列" data-options="iconCls:'icon-yincang'" style="overflow:auto;"selected="true">
					<div id="choiceColumns"   fit="true"></div>	
				</div>
     		</div>
      </div>
    </div>		
</body>
</html>
